<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 系统架构师考试备考助手</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- 个人信息头部 -->
        <header class="profile-header">
            <div class="avatar">
                <img src="images/avatar.png" alt="用户头像">
            </div>
            <div class="user-info">
                <h2>张同学</h2>
                <p>学习天数: 45天 | 总学时: 120小时</p>
            </div>
        </header>

        <!-- 学习数据 -->
        <section class="study-data">
            <h3 class="section-title">
                <i class="fas fa-chart-line"></i>
                学习数据
            </h3>
            <div class="data-card">
                <div class="chart-container">
                    <h4>正确率趋势</h4>
                    <div class="chart accuracy-chart">
                        <!-- 这里将通过JavaScript绘制折线图 -->
                        <canvas id="accuracy-chart"></canvas>
                    </div>
                </div>
                <div class="topic-mastery">
                    <h4>专题掌握度</h4>
                    <div class="mastery-item">
                        <span>软件工程</span>
                        <div class="progress-bar">
                            <div class="progress" style="width: 85%;">85%</div>
                        </div>
                    </div>
                    <div class="mastery-item">
                        <span>数据结构</span>
                        <div class="progress-bar">
                            <div class="progress" style="width: 72%;">72%</div>
                        </div>
                    </div>
                    <div class="mastery-item">
                        <span>系统架构</span>
                        <div class="progress-bar">
                            <div class="progress" style="width: 68%;">68%</div>
                        </div>
                    </div>
                    <div class="mastery-item">
                        <span>项目管理</span>
                        <div class="progress-bar">
                            <div class="progress" style="width: 90%;">90%</div>
                        </div>
                    </div>
                </div>
                <div class="essay-stats">
                    <h4>论文阅读量</h4>
                    <div class="stat-number">
                        <i class="fas fa-book"></i>
                        <span>32</span>
                        <p>篇范文</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 我的收藏 -->
        <section class="my-collections">
            <h3 class="section-title">
                <i class="fas fa-star"></i>
                我的收藏
            </h3>
            <div class="collection-tabs">
                <div class="tab active" data-tab="questions">重要题目</div>
                <div class="tab" data-tab="essays">论文范文</div>
            </div>
            <div class="collection-content">
                <div class="tab-content active" id="questions-content">
                    <div class="collection-item">
                        <h4>分布式系统的CAP理论应用</h4>
                        <p>难度: <span class="difficulty hard">高</span></p>
                    </div>
                    <div class="collection-item">
                        <h4>微服务架构设计原则</h4>
                        <p>难度: <span class="difficulty medium">中</span></p>
                    </div>
                    <div class="collection-item">
                        <h4>软件架构评估方法</h4>
                        <p>难度: <span class="difficulty hard">高</span></p>
                    </div>
                    <div class="collection-item">
                        <h4>UML建模技术</h4>
                        <p>难度: <span class="difficulty easy">低</span></p>
                    </div>
                </div>
                <div class="tab-content" id="essays-content">
                    <div class="collection-item">
                        <h4>基于微服务的电商平台架构设计</h4>
                        <p>字数: 5000 | 评分: <span class="score">优</span></p>
                    </div>
                    <div class="collection-item">
                        <h4>大数据环境下的系统架构优化</h4>
                        <p>字数: 4800 | 评分: <span class="score">良</span></p>
                    </div>
                    <div class="collection-item">
                        <h4>云原生架构在金融领域的应用</h4>
                        <p>字数: 5200 | 评分: <span class="score">优</span></p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 设置 -->
        <section class="settings">
            <h3 class="section-title">
                <i class="fas fa-cog"></i>
                设置
            </h3>
            <div class="setting-item">
                <span>夜间模式</span>
                <label class="switch">
                    <input type="checkbox" id="night-mode">
                    <span class="slider round"></span>
                </label>
            </div>
            <div class="setting-item">
                <span>消息通知</span>
                <label class="switch">
                    <input type="checkbox" id="notifications" checked>
                    <span class="slider round"></span>
                </label>
            </div>
            <div class="setting-item">
                <span>学习提醒</span>
                <label class="switch">
                    <input type="checkbox" id="study-reminder" checked>
                    <span class="slider round"></span>
                </label>
            </div>
        </section>

        <!-- 底部导航 -->
        <nav class="bottom-nav">
            <a href="index.html">
                <i class="fas fa-home"></i>
                <span>学习</span>
            </a>
            <a href="profile.html" class="active">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </a>
        </nav>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="js/profile.js"></script>
</body>
</html> 